<template>
  <div class="loading">
    <a-modal
      :title="title"
      style="top: 100px;"
      :visible.sync="visible"
      width="800px"
      :zIndex="11111"
      @ok="handleCancel"
      @cancel="handleCancel"
    >
      <div>
        <a-upload
          name="file"
          @change="handleChange"
          :action="uploadUrl"
          :headers="headers"
          :showUploadList="false"
          :accept="accept"
          >
          <a-button
            class="upload-data-btn"
            type="dashed"
          >
            <a-icon type="plus" />
            点击上传文件
          </a-button>
        </a-upload>
      </div>
    </a-modal>
  </div>
</template>

<script>
import Vue from 'vue'
// import { mapGetters } from 'vuex'
import { ACCESS_TOKEN } from '@/store/mutation-types'

export default {
  name: 'IUpload',
  components: {
  },
  data () {
    return {
      options: {},
      title: '请填写',
      accept: '',
      path: '',
      visible: false,
      baseUrl: process.env.VUE_APP_BASE_URL + process.env.VUE_APP_BASE_URL_SUFFIX,
    }
  },
  computed: {
    // ...mapGetters(['baseUrl', 'token']),
    uploadUrl () {
      return `${this.baseUrl}${this.path}`
    },
    headers () {
      return {
         Authorization: Vue.ls.get(ACCESS_TOKEN),
         Pathname: Vue.ls.get('PATHNAME'),
         Banben: Vue.ls.get('BANBEN'),
      }
    }
  },
  methods: {
    onChange(date, dateString) {
        console.log(date, dateString);
    },
    parseOptions(options) {
      this.title = options.title || this.title
      this.accept = options.accept
      this.path = options.path

      this.options = options
    },
    handleSubmit(data) {
      this.options && this.options.success(data)
    },
    handleChange ({ file, fileList }) {
      if (file.response) {
        console.log('code', file.response.status_code)
            if (file.response.status_code == '409') {
              this.$message.error(file.response.message)
              return false
            }
            else if (file.response.status_code == '500') {
              this.$message.error('操作失败')
              return false
            }
            else if (file.response.status_code == '500') {
              this.$message.error('页面失效，请刷新页面重试')
              return false
            }
            else {
              // console.log('data', file.response.data)
              // this.loading = false
              let data = file.response.data
              this.handleSubmit(data)
            }
        }
    },
    handleCancel() {
      this.visible = false
    }
  }
}
</script>
<style>
.loading {
    width: 120px;
    height: 120px;
    position: fixed;
    top: 32%;
    left: 50%;
    margin-left: -60px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 5px;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.loading svg {
  margin: 0 auto;
}

.loading p {
  text-align: center;
  line-height: 30px;
  color: #eeeeee;
}
</style>
